<!-- Author:Rain -->
<template>
    <div class="page-box">
        <div class="user-center-wrap">
            <div class="bottom-content">
                <!-- <div class="topbar">
                    <el-select v-model="value" placeholder="Select" size="small" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div> -->
                <ul>
                   <GeekList :data="item" v-for="item,index in data" :key="index"></GeekList>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import GeekList from "@/components/list/geek-list.vue"
let geekData = {

}

const data = [
  {
    geekInfo: {
      name: '罗雨韩',
      age: 22,
      status: '在校',
      grade: '本科',
      state: '积极寻求实习机会',
      pic:'https://picx.zhimg.com/80/v2-30c4eabc28207c9cdf4550466aac2d46_720w.webp?source=1def8aca'
    },
    expect: {
      address: '北京',
      pos: '后端开发'
    },
    advantage: '精通Node.js和数据库设计',
    tags: ['Node.js', 'Express', 'MongoDB', 'RESTful'],
    timeline: [
      {
        time: '2019/9-2022/6',
        company: '北京大学',
        position: '计算机科学与技术',
        grade: '本科'
      },
      {
        time: '2021/7-2021/9',
        company: '百度',
        position: '后端开发实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '王雷程',
      age: 24,
      status: '在职',
      grade: '硕士',
      state: '寻求更好的工作机会',
      pic:'https://picx.zhimg.com/80/v2-49a0c7cee775fb9302797bef51bc25b8_720w.webp?source=1def8aca'
    },
    expect: {
      address: '上海',
      pos: '全栈开发工程师'
    },
    advantage: '全栈开发经验丰富，熟悉多种编程语言',
    tags: ['React', 'Node.js', 'Java', '全栈'],
    timeline: [
      {
        time: '2020/9-至今',
        company: '上海交通大学',
        position: '软件工程',
        grade: '硕士'
      },
      {
        time: '2021/3-2021/6',
        company: '腾讯',
        position: '全栈开发实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '张云时',
      age: 26,
      status: '在职',
      grade: '硕士',
      state: '寻求职业发展机会',
      pic:'https://picx.zhimg.com/80/v2-5ed8f96d1a66c4b24b04f31d1d73f31a_720w.webp?source=1def8aca'
    },
    expect: {
      address: '深圳',
      pos: '人工智能工程师'
    },
    advantage: '在人工智能领域有深入研究和实践经验',
    tags: ['Python', 'TensorFlow', '机器学习', '深度学习'],
    timeline: [
      {
        time: '2018/9-2020/6',
        company: '清华大学',
        position: '自动化',
        grade: '硕士'
      },
      {
        time: '2020/7-至今',
        company: '华为',
        position: '人工智能工程师'
      }
    ]
  },
  {
    geekInfo: {
      name: '刘天越',
      age: 23,
      status: '在校',
      grade: '本科',
      state: '希望找到与专业相关的实习',
      pic:'https://picx.zhimg.com/80/v2-c15ba8febd29c3603f86fa1270b6057f_720w.webp?source=1def8aca'
    },
    expect: {
      address: '广州',
      pos: '移动应用开发工程师'
    },
    advantage: '对移动应用开发有浓厚兴趣，熟悉iOS开发',
    tags: ['iOS', 'Swift', 'Android', 'Kotlin'],
    timeline: [
      {
        time: '2019/9-2023/6',
        company: '中山大学',
        position: '电子信息工程',
        grade: '本科'
      },
      {
        time: '2022/7-2022/9',
        company: '小米',
        position: '移动应用开发实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '陈悦灵',
      age: 21,
      status: '在校',
      grade: '本科',
      state: '寻找实习机会以提升技能',
      pic:'https://pica.zhimg.com/80/v2-77922590697598eb1964f29d21e451a1_720w.webp?source=1def8aca'
    },
    expect: {
      address: '成都',
      pos: 'UI/UX设计师'
    },
    advantage: '具有良好的设计感和用户体验设计经验',
    tags: ['UI设计', 'UX设计', 'Sketch', 'Adobe XD'],
    timeline: [
      {
        time: '2018/9-2022/6',
        company: '四川大学',
        position: '视觉传达设计',
        grade: '本科'
      },
      {
        time: '2021/7-2021/8',
        company: '阿里巴巴',
        position: 'UI/UX设计实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '杨帆航',
      age: 22,
      status: '在校',
      grade: '本科',
      state: '对新技术有热情，寻求实习机会',
      pic:'https://picx.zhimg.com/80/v2-338b2e808d960c877ed505d68c5b7d26_720w.webp?source=1def8aca'
    },
    expect: {
      address: '武汉',
      pos: '云计算工程师'
    },
    advantage: '对云计算技术有深入的了解和实践经验',
    tags: ['AWS', 'Azure', 'Google Cloud', 'Docker'],
    timeline: [
      {
        time: '2018/9-2022/6',
        company: '武汉大学',
        position: '计算机科学与技术',
        grade: '本科'
      },
      {
        time: '2021/7-2021/9',
        company: 'IBM',
        position: '云计算实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '赵阳圣',
      age: 20,
      status: '在校',
      grade: '本科',
      state: '寻求实习机会以提升编程技能',
      pic:'https://pic1.zhimg.com/80/v2-d826afddae4a5f9ea70f074bf10293d3_720w.webp?source=1def8aca'
    },
    expect: {
      address: '南京',
      pos: '软件开发工程师'
    },
    advantage: '熟悉多种编程语言，具有良好的编程基础',
    tags: ['C++', 'Java', 'Python', '软件开发'],
    timeline: [
      {
        time: '2019/9-2023/6',
        company: '南京大学',
        position: '软件工程',
        grade: '本科'
      },
      {
        time: '2022/1-2022/2',
        company: '京东',
        position: '软件开发实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '黄蓉琦',
      age: 23,
      status: '在校',
      grade: '本科',
      state: '希望找到与专业相关的实习机会',
      pic:'https://picx.zhimg.com/v2-fff950e8ba0dbf576e2ee7f7ec0a890b_r.jpg?source=1def8aca'
    },
    expect: {
      address: '西安',
      pos: '数据分析师'
    },
    advantage: '对数据分析有浓厚兴趣，熟悉数据分析工具',
    tags: ['数据分析', 'R语言', 'Python', '数据可视化'],
    timeline: [
      {
        time: '2019/9-2023/6',
        company: '西安交通大学',
        position: '统计学',
        grade: '本科'
      },
      {
        time: '2022/3-2022/5',
        company: '滴滴出行',
        position: '数据分析实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '周星星',
      age: 24,
      status: '在职',
      grade: '硕士',
      state: '寻求更具挑战性的工作机会',
      pic:'https://pic1.zhimg.com/80/v2-e755a11d76031af40d15deadbba80b98_720w.webp?source=1def8aca'
    },
    expect: {
      address: '重庆',
      pos: '网络安全工程师'
    },
    advantage: '在网络安全领域有丰富的工作经验和专业知识',
    tags: ['网络安全', '渗透测试', '防火墙', '安全协议'],
    timeline: [
      {
        time: '2020/9-至今',
        company: '重庆大学',
        position: '网络空间安全',
        grade: '硕士'
      },
      {
        time: '2021/6-2021/8',
        company: '360安全',
        position: '网络安全实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '吴迪',
      age: 22,
      status: '在校',
      grade: '本科',
      state: '寻找实习以提升项目管理能力',
      pic:'https://picx.zhimg.com/80/v2-e52b7230927a4dadbfb67751c2419f91_720w.webp?source=1def8aca'
    },
    expect: {
      address: '杭州',
      pos: '项目经理'
    },
    advantage: '具有良好的项目管理和团队协作能力',
    tags: ['项目管理', '敏捷开发', '团队协作', '风险管理'],
    timeline: [
      {
        time: '2018/9-2022/6',
        company: '浙江大学',
        position: '工程管理',
        grade: '本科'
      },
      {
        time: '2021/7-2021/9',
        company: '网易',
        position: '项目助理实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '孙悟饭',
      age: 21,
      status: '在校',
      grade: '本科',
      state: '希望找到与专业相关的实习机会',
    },
    expect: {
      address: '天津',
      pos: '游戏开发工程师'
    },
    advantage: '对游戏开发有浓厚兴趣，熟悉Unity和C#编程',
    tags: ['游戏开发', 'Unity', 'C#', '游戏设计'],
    timeline: [
      {
        time: '2019/9-2023/6',
        company: '天津大学',
        position: '数字媒体技术',
        grade: '本科'
      },
      {
        time: '2022/1-2022/2',
        company: '完美世界',
        position: '游戏开发实习生'
      }
    ]
  },
  {
    geekInfo: {
      name: '钱多多',
      age: 23,
      status: '在校',
      grade: '本科',
      state: '寻求实习机会以提升产品设计能力',
},
expect: {
address: '苏州',
pos: '产品经理'
},
advantage: '对产品设计有独特见解，熟悉产品开发流程',
tags: ['产品设计', '用户体验', '原型设计', '敏捷开发'],
timeline: [
{
time: '2019/9-2023/6',
company: '苏州大学',
position: '工业设计',
grade: '本科'
},
{
time: '2022/3-2022/5',
company: '阿里巴巴',
position: '产品助理实习生'
}
]
},
{
geekInfo: {
name: '孔明明',
age: 25,
status: '在职',
grade: '硕士',
state: '寻求更好的职业发展机会',
},
expect: {
address: '厦门',
pos: '大数据工程师'
},
advantage: '在大数据处理和分析方面有丰富经验',
tags: ['大数据', 'Hadoop', 'Spark', '数据挖掘'],
timeline: [
{
time: '2020/9-至今',
company: '厦门大学',
position: '数据科学与大数据技术',
grade: '硕士'
},
{
time: '2021/7-2021/9',
company: '字节跳动',
position: '大数据工程师'
}
]
},
{
geekInfo: {
name: '李雷',
age: 22,
status: '在校',
grade: '本科',
state: '寻求实习机会以提升软件开发技能',
},
expect: {
address: '大连',
pos: '软件开发工程师'
},
advantage: '熟悉软件开发流程，具备良好的编程习惯',
tags: ['软件开发', 'C++', 'Java', '软件工程'],
timeline: [
{
time: '2018/9-2022/6',
company: '大连理工大学',
position: '计算机科学与技术',
grade: '本科'
},
{
time: '2021/7-2021/8',
company: '华为',
position: '软件开发实习生'
}
]
},
{
geekInfo: {
name: '韩梅梅',
age: 20,
status: '在校',
grade: '本科',
state: '希望找到与专业相关的实习机会',
},
expect: {
address: '济南',
pos: '网络工程师'
},
advantage: '对网络技术有深入理解，熟悉网络设备配置',
tags: ['网络工程', 'CCNA', '网络配置', '网络安全'],
timeline: [
{
time: '2019/9-2023/6',
company: '山东大学',
position: '网络工程',
grade: '本科'
},
{
time: '2022/1-2022/2',
company: '思科',
position: '网络工程实习生'
}
]
},
{
geekInfo: {
name: '林涛',
age: 23,
status: '在校',
grade: '本科',
state: '寻求实习机会以提升数据库管理技能',
},
expect: {
address: '青岛',
pos: '数据库管理员'
},
advantage: '熟悉数据库设计和管理，有丰富的实践经验',
tags: ['数据库管理', 'SQL', 'Oracle', 'MySQL'],
timeline: [
{
time: '2019/9-2023/6',
company: '中国海洋大学',
position: '信息管理与信息系统',
grade: '本科'
},
{
time: '2022/3-2022/5',
company: 'IBM',
position: '数据库管理实习生'
}
]
},
{
geekInfo: {
name: '陈默',
age: 24,
status: '在职',
grade: '硕士',
state: '寻求更具挑战性的技术岗位',
},
expect: {
address: '沈阳',
pos: '嵌入式开发工程师'
},
advantage: '在嵌入式系统开发方面有扎实的理论基础和实践经验',
tags: ['嵌入式开发', 'C', 'Linux', 'ARM'],
timeline: [
{
time: '2020/9-至今',
company: '东北大学',
position: '控制科学与工程',
grade: '硕士'
},
{
time: '2021/7-2021/9',
company: '中兴通讯',
position: '嵌入式开发实习生'
}
]
},
{
geekInfo: {
name: '王小二',
age: 21,
status: '在校',
grade: '本科',
state: '希望找到与专业相关的实习机会',
},
expect: {
address: '哈尔滨',
pos: '物联网工程师'
},
advantage: '对物联网技术有浓厚兴趣，熟悉相关通信协议',
tags: ['物联网', 'MQTT', '传感器', 'ZigBee'],
timeline: [
{
time: '2018/9-2022/6',
company: '哈尔滨工业大学',
position: '电子与通信工程',
grade: '本科'
},
{
time: '2021/7-2021/8',
company: '海尔',
position: '物联网实习生'
}
]
},
{
geekInfo: {
name: '张三丰',
age: 22,
status: '在校',
grade: '本科',
state: '寻求实习机会以提升区块链开发技能',
},
expect: {
address: '长春',
pos: '区块链开发工程师'
},
advantage: '对区块链技术有深入研究，熟悉智能合约开发',
tags: ['区块链', 'Solidity', '以太坊', '智能合约'],
timeline: [
{
time: '2018/9-2022/6',
company: '吉林大学',
position: '计算机科学与技术',
grade: '本科'
},
{
time: '2021/7-2021/9',
company: '京东',
position: '区块链实习生'
}
]
},
{
geekInfo: {
name: '赵四',
age: 23,
status: '在职',
grade: '硕士',
state: '寻求更好的职业发展机会',
},
expect: {
address: '长沙',
pos: '机器学习工程师'
},
advantage: '在机器学习领域有扎实的理论基础和实践经验',
tags: ['机器学习', '数据挖掘', '神经网络', '深度学习'],
timeline: [
{
time: '2020/9-至今',
company: '中南大学',
position: '控制理论与控制工程',
grade: '硕士'
},
{
time: '2021/7-2021/9',
company: '百度',
position: '机器学习实习生'
}
]
},
{
geekInfo: {
name: '钱多多',
age: 25,
status: '在职',
grade: '硕士',
state: '寻求挑战性的技术岗位',
},
expect: {
address: '福州',
pos: '云计算架构师'
},
advantage: '在云计算架构设计和部署方面有丰富经验',
tags: ['云计算', 'AWS', '云安全', '云服务'],
timeline: [
{
time: '2020/9-至今',
company: '福州大学',
position: '计算机科学与技术',
grade: '硕士'
},
{
time: '2021/7-2021/9',
company: '腾讯',
position: '云计算架构实习生'
}
]
},
{
geekInfo: {
name: '孙悟空',
age: 21,
status: '在校',
grade: '本科',
state: '希望找到与专业相关的实习机会',
},
expect: {
address: '合肥',
pos: '网络安全分析师'
},
advantage: '对网络安全有浓厚兴趣，熟悉渗透测试和安全防护',
tags: ['网络安全', '渗透测试', '安全防护', '安全审计'],
timeline: [
{
time: '2018/9-2022/6',
company: '中国科学技术大学',
position: '信息安全',
grade: '本科'
},
{
time: '2021/7-2021/8',
company: '360安全',
position: '网络安全实习生'
}
]
}
] 

const value = ref('')
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]

</script>

<style scoped lang="less">
.page-box {
    background: url(https://static.shiyanlou.com/lanqiao/frontend/dist/img/page-bg.50c13e0.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
    background-attachment: fixed;
}

.user-center-wrap {
    margin: 0 auto;
    padding-bottom: 0px;
    padding-top: 60px;
    width: 1200px;

    .bottom-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: relative;

        .topbar {
            position: absolute;
            height: 60px;
            width: 1180px;
            top: -60px;
            background-color: aqua;
        }
    }
}
</style>